<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
 <el-row :gutter="24">
    <el-col :span="3.5"   style="padding-left: 1px; padding-right: 1px;">
    <el-form-item label="客户" prop="organId">
       <el-select style="width: 10.5rem;"
         v-model="queryParams.organId"
         placeholder="请选择客户"
         clearable
		 filterable
         size="small"
       >
         <el-option
           v-for="menber in members"
           :key="menber.id"
           :label="menber.supplier"
           :value="menber.id"
         />
       </el-select>
      </el-form-item>
      </el-col>
       <el-col :span="4.2" style="padding-left: 1px; padding-right: 1px;">
         <el-form-item label="单据日期" prop="createTimeRange">
         <el-date-picker size="small" style="width: 14.5rem;"
               v-model="queryParams.createTimeRange"
               type="daterange"
               range-separator="至"
               start-placeholder="开始日期"
               end-placeholder="结束日期"  @keyup.enter.native="handleQuery">

             </el-date-picker>
         </el-form-item>
         </el-col>
         <el-col :span="4" style="padding-left: 1px; padding-right: 1px;">
       <el-form-item >
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
       </el-form-item>
       </el-col>
       </el-row>
       <el-row :gutter="24">
 <el-col :span="1.5" style="margin-left: 0.55rem;">

      </el-col>


        </el-row>
    </el-form>
     <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
    <el-table v-loading="loading" max-height="620px" :data="customerAccountlList" @selection-change="handleSelectionChange" :summary-method="getSummaries" show-summary>
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="单据编号" align="center" prop="number" >
       <template slot-scope="scope">
       <el-link type="primary" @click="myHandleDetail(scope.row)">{{scope.row.number}}</el-link>
         </template>
      </el-table-column>
      <el-table-column label="类型" align="center" prop="type" />
      <el-table-column label="单位名称" align="center" prop="supplierName" />
      <el-table-column label="单据金额" align="center" prop="billMoney" />
      <el-table-column label="实际收款" align="center" prop="changeAmount" />
      <el-table-column label="本期未收款" align="center" prop="allPrice" />
      <el-table-column label="单据日期" align="center" prop="oTime" />
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      :page-sizes="[10, 50, 100, 200,500, 1000,2000]"
      @pagination="getList"
    />
  <bill-detail ref="billDetail"></bill-detail>

  <account-bill-detail ref="accountBillDetail"></account-bill-detail>
  </div>
</template>

<script>
  import BillDetail from '../comm/dialog/BillDetail'
  import { findStatementAccount,findBillDetailByNumber}  from "@/api/bill/retail";
  import {getAccountDetailByNumber} from "@/api/basicsystem/account";
 import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
    import { listAllDepot } from "@/api/basicsystem/depot";
    import { getNowFormatMonth } from "@/utils/ruoyi.js";
  import accountBillDetail from '../../basicsystem/comm/dialog/BillDetail';
import * as math from 'mathjs'
    export default {
  name: "customerAccount",
  components: {
   BillDetail,accountBillDetail },
  data() {
    return {

      depotAllList:[],
       dateFormat: 'YYYY-MM-DD',
        currentDay: this.$moment().format('YYYY-MM-DD'),
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
     // 客户对账接口
     customerAccountlList: [],
     members:[],//供应商
     // 弹出层标题
     title: "",
     // 是否显示弹出层
     open: false,
     queryDepotParams:{},
     // 查询参数
     queryParams: {
       pageNum: 1,
       pageSize: 10,
       number: '',
        materialParam: "",
          depotId: "",
       beginTime: "",
       endTime: "",
       supType: "客户",
       createTimeRange:[],
     },
    allMonthAmount: '',
    allCurrentAmount: '',

      // 表单参数
      form: {},
      // 表单校验
      rules: {

      }
    };
  },
  beforeCreate() {

    this.getSuppliers({'type':'客户'}).then(response => {
      this.members = response.data;
    });
  },
  created() {
    console.log(this.queryParams.createTimeRange+"aaa")
     this.queryParams.createTimeRange = [this.$moment(getNowFormatMonth() + '-01', this.dateFormat), this.$moment(this.currentDay, this.dateFormat)];
     console.log(this.queryParams.createTimeRange+"adf")
    this.listAllDepot();
   this.getList();
  },
  methods: {
    getSummaries(param) {
                   const { columns, data } = param;
                   const sums = [];
                   columns.forEach((column, index) => {
                     if (index === 0) {
                       sums[index] = '';
                       return;
                     }
                     if (index === 1) {
                       sums[index] = '合计';
                       return;
                     }
                     if (index === 2) {
                       sums[index] = '-';
                       return;
                     }
                     if (index === 3) {
                       sums[index] = '-';
                       return;
                     }
                     if (index === 7) {
                       sums[index] = '-';
                       return;
                     }
                     const values = data.map(item => Number(item[column.property]));
                     if (!values.every(value => isNaN(value))) {
                       sums[index] = values.reduce((prev, curr) => {
                         const value = Number(curr);
						  if (!isNaN(value)) {
							  return math.add(math.bignumber(prev),math.bignumber(curr));
						  } else {
							  return math.bignumber(prev);
						  }
                       }, 0);
                       sums[index] += '';//可以写单位
                     } else {
                       sums[index] = '0';
                     }
                   });

                   return sums;
                 },
    //根据单据查询详情
    myHandleDetail(row){
        let that = this
        let queryParm={ number: row.number }
        if(row.type =='收入' || row.type =='支出' || row.type =='收款' || row.type =='付款' || row.type =='收预付款'){
          getAccountDetailByNumber(row.number).then(response =>{
             that.$refs.accountBillDetail.show(response.data,row.type);
             that.$refs.billDetail.title=response.data.type+"-详情";
          });
        }else{
          findBillDetailByNumber(queryParm).then(response => {
            that.$refs.billDetail.show(response.data,row.type);
            that.$refs.billDetail.title=response.data.subType+""+response.data.type+"-详情";
          });
        }
    },
/** 查询所产仓库 */
    listAllDepot() {

      listAllDepot(this.queryDepotParams).then(response => {
       /* this.materialList = response.rows;
        this.total = response.total;
        this.loading = false; */
         this.depotAllList=response.list;

      });
    },
    /** 查询库存列表 */
    getList() {
     this.loading = true;

/*     console.log(this.queryParams.monthTime)
 this.queryParams.monthTime=this.$moment(this.currentMonth).format("YYYY-MM");
     if(this.queryParams.monthTime==null||this.queryParams.monthTime==""){
       this.queryParams.monthTime=this.$moment().format("YYYY-MM");
     } */
     console.log(this.queryParams.createTimeRange)
     this.queryParams.beginTime=this.$moment(this.queryParams.createTimeRange[0]).format("YYYY-MM-DD");
     this.queryParams.endTime=this.$moment(this.queryParams.createTimeRange[1]).format("YYYY-MM-DD");
      console.log(this.queryParams.endTime)
     findStatementAccount(this.queryParams).then(response => {
      // this.customerAccountlList = response.data;


       this.customerAccountlList = response.data.rows;
       this.total = response.data.total;
       /* this.tableAddTotalRow(this.columns, this.dataSource)
       if(this.queryParam.organId) {
         this.firstTotal = '期初应收：' + res.data.firstMoney + "，"
         this.lastTotal = '期末应收：' + res.data.lastMoney
       } */
       this.loading = false;
     });
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getMaterialunit(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改计量单位";
      });
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download('/bill/retail/statementAccountExport', {
        ...this.queryParams
      }, `客户对账_${this.parseTime(new Date(),'{y}-{m}-{d}')}.xlsx`)
    }
  }
};
</script>
